<!--
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Test using CsvStore to load FilteringTable</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<script type="text/javascript">
		var djConfig = { isDebug: true, debugAtAllCosts: true };
	</script>
	<script type="text/javascript" src="../../../dojo.js"></script>
	<script type="text/javascript">
		dojo.require("dojo.widget.FilteringTable");
		dojo.require("dojo.data.csv.*");
		dojo.hostenv.writeIncludes();
	</script>
	<style type="text/css">
		/***
			This is just an example of how to use the table.
			You can override any class names.
		***/
		table {
			border:1px solid #ccc;
			border-collapse:collapse;
		}
		table td, table th {
			padding:8px;
			font-weight:normal;
		}
		table thead td, table thead th {
			background-image:url(../../widget/images/ft-head.gif);
			background-repeat:no-repeat;
			background-position:top right;
		}
		table thead td.selectedUp, table thead th.selectedUp {
			background-image:url(../../widget/images/ft-headup.gif);
		}
		table thead td.selectedDown, table thead th.selectedDown {
			background-image:url(../../widget/images/ft-headdown.gif);
		}
			
		table tbody tr td {
			border-bottom:1px solid #ddd;
		}
		table tbody tr.alt td {
			background: #e3edfa;
		}
		table tbody tr.selected td {
			background: yellow;
		}
		table tbody tr:hover td {
			background: #a6c2e7;
		}
		table tbody tr.selected:hover td {
			background:#ff9;
		}

	</style>
	<script type="text/javascript">
		function loadFilteringTable() {
			var csvStore = new dojo.data.csv.CsvStore({url:'movies.csv'});
			var result = csvStore.find();
			var dataInSimpleStoreFormat = [];
			var columnsInFilteringTableFormat = null;
			var addRow = function(item, index, result) {
				var object = {};
				var attributes = csvStore.getAttributes(item);
				object["Identity"] = csvStore.getIdentity(item);
				for (var i in attributes) {
					var attribute = attributes[i];
					var value = csvStore.get(item, attribute);
					object[attribute] = value;
				}
				dataInSimpleStoreFormat.push(object);
				if (!columnsInFilteringTableFormat) {
					columnsInFilteringTableFormat = [];
					for (var i in attributes) {
						var attribute = attributes[i];
						columnsInFilteringTableFormat.push({field: attribute});
					}
				}
			};
			result.forEach(addRow);
			
			var filteringTable = dojo.widget.createWidget("dojo:FilteringTable", {valueField:"Identity"}, dojo.byId("content"));

			for (var i in columnsInFilteringTableFormat) {
				var column = columnsInFilteringTableFormat[i];
				filteringTable.columns.push(filteringTable.createMetaData(column));
			}

			filteringTable.store.setData(dataInSimpleStoreFormat);

		}
		function displayViaDebugStrings() {
			var csvStore = new dojo.data.csv.CsvStore({url:'movies.csv'});
			var result = csvStore.find();
			var displayItem = function(item, index, result) {
				var string = '{';
				var attributes = csvStore.getAttributes(item);
				for (var i in attributes) {
					var attribute = attributes[i];
					var value = csvStore.get(item, attribute);
					if (i > 0) {
						string += ',\n ';
					}
					string += attribute + ":'" + value + "'";
				}
				string += '}';
				dojo.debug(string);
			};
			dojo.debug("");
			dojo.debug("movies.csv contents...");
			result.forEach(displayItem);
		}
		dojo.addOnLoad(loadFilteringTable);
		dojo.addOnLoad(displayViaDebugStrings);
	</script>
</head>
<body>
	<h2>movies.csv shown in a FilteringTable</h2>
	<table id="content" style="width: 500px; height: 200px;"></table>
	<p>&nbsp;</p>
	<h2>dojo.debug output</h2>
</body>
</html>
